@charset "utf-8";
@import "common";
.box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #bf0c21 url(../images/xx_03.png) 100%/100% repeat-y;
    background-size: 200%;
    .WeddingFeast {
        @include midContent;
        //标题
        .title {
            margin: r(27) 0 r(34) 0;
            color: #e7c598;
            font-size: r(30);
            text-align: center;
            span {
                font-size: r(34);
                font-weight: 400;
                padding: 0 r(6);
                border-bottom: 1px solid #e7c598;
            }
        }
        //内容
        .content {
            text-align: justify;
            width: r(450);
            overflow-y: auto;
            position: absolute;
            top: r(100);
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 0 r(16);
            //主宾桌
            .GuestTable,
            .GuestTable2,
            {
                width: r(214);
                height: r(240);
                position: relative;
                z-index: 1;
                .table {
                    width: r(122);
                    height: r(122);
                    background: #e7c598;
                    border-radius: 50%;
                    line-height: r(122);
                    text-align: center;
                    font-size: r(20);
                    color: #bf0c21;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    box-shadow: 2px 2px 5px #000;
                }
                .seating,
                .seating,
                .seating,
                .seating,
                .seating,
                .seating {
                    width: r(48);
                    height: r(48);
                    background: #e7c598 url(../images/xiaor_03.png) 100%/100% no-repeat;
                    box-shadow: 2px 2px 5px #000;
                    border-radius: 50%;
                    overflow: hidden;
                    z-index: 1;
                    img {
                        width: 100%;
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                        right: -9999px;
                        bottom: -9999px;
                        margin: auto;
                    }
                }
                .seating:nth-child(2) {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                .seating:nth-child(3) {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                .seating:nth-child(4) {
                    position: absolute;
                    left: 0;
                    top: r(48);
                }
                .seating:nth-child(5) {
                    position: absolute;
                    left: 0;
                    bottom: r(48);
                }
                .seating:nth-child(6) {
                    position: absolute;
                    right: 0;
                    top: r(48);
                }
                .seating:nth-child(7) {
                    position: absolute;
                    right: 0;
                    bottom: r(48);
                }
            }
            .GuestTable {
                margin: 0 auto;
            }
            .GuestTable2 {
                width: r(160);
                height: r(180);
                display: inline-block;
                margin: r(-20) 0 r(40) 0;
                transform-origin: center center;
                .table {
                    width: r(92);
                    height: r(92);
                    line-height: r(92);
                }
                .seating,
                .seating,
                .seating,
                .seating,
                .seating,
                .seating {
                    width: r(36);
                    height: r(36);
                }
                .seating:nth-child(4) {
                    position: absolute;
                    left: 0;
                    top: r(34);
                }
                .seating:nth-child(7) {
                    position: absolute;
                    right: 0;
                    bottom: r(34);
                }
                .seating:nth-child(5) {
                    position: absolute;
                    left: 0;
                    bottom: r(34);
                }
                .seating:nth-child(6) {
                    position: absolute;
                    right: 0;
                    top: r(34);
                }
                &:nth-child(2n-1) {
                    float: right;
                }
                &:nth-child(2n) {
                    float: left;
                }
                &:last-child {
                    .table {
                        background: url(../images/jx_06.png) 100%/100% no-repeat;
                    }
                }
            }
        }
    }
}

.HuanY_box {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(123, 2, 7, .5);
    top: 0;
    left: 0;
    z-index: 5;
    .HuanY {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 5;
        margin: auto;
        background: #e7c598;
        width: r(412);
        height: r(280);
        border-radius: r(8);
        transition: all .4s;
        .HuanY_content {
            h4 {
                font-size: r(22);
                color: #bf0c21;
                text-align: center;
                margin: r(30) 0 r(20) 0;
                span {
                    position: relative;
                    top: r(-3);
                    font-size: r(24);
                    margin: 0 r(4);
                    border-bottom: 1px solid #bf0c21;
                }
            }
            .Rub {
                width: r(222);
                margin: 0 auto;
                font-size: r(20);
                color: #e7c598;
                text-align: center;
                padding: r(7) 0 r(10) 0;
                background: #bf0c21;
                border-radius: r(8);
                margin-bottom: r(12);
            }
        }
        .Guanb {
            width: r(36);
            height: r(36);
            background: url(../images/gb_03.png) 100%/100% no-repeat;
            border-radius: 50%;
            position: absolute;
            right: r(16);
            top: r(11);
        }
    }
}

.zhuf {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(123, 2, 7, .5);
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    .zhuf_HuanY {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 5;
        margin: auto;
        background: #e7c598;
        width: r(412);
        height: r(250);
        border-radius: r(8);
        transition: all .4s;
        transform: translateY(-200%);
        opacity: 0;
        .zhuf_imgb {
            width: r(290);
            height: r(28);
            margin: 0 auto;
            margin-top: r(106);
            position: relative;
            overflow: hidden;
            img {
                width: 100%;
                position: absolute;
                top: -9999px;
                left: -9999px;
                right: -9999px;
                bottom: -9999px;
                margin: auto;
            }
        }
        .zhuf_Guanb {
            width: r(36);
            height: r(36);
            background: url(../images/gb_03.png) 100%/100% no-repeat;
            border-radius: 50%;
            position: absolute;
            right: r(16);
            top: r(11);
        }
    }
}

.tChuk_box {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(123, 2, 7, .5);
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: all .5s;
    .tChuk {
        width: r(414);
        height: r(250);
        line-height: r(45);
        text-align: center;
        border-radius: r(8);
        font-size: r(30);
        background: #e7c598;
        color: #bf0c21;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform: translateY(-600%);
        transition: all .4s;
        .con {
            margin-top: r(74);
        }
        .Guanb2 {
            width: r(36);
            height: r(36);
            background: url(../images/gb_03.png) 100%/100% no-repeat;
            border-radius: 50%;
            position: absolute;
            right: r(16);
            top: r(11);
        }
    }
}

.bj {
    opacity: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    background: #bf0c21 url(../images/xx_03.png) 100%/100% repeat-y;
    background-size: 200%;
    .rux{
        width: 100%;
        height: r(114);
        position: absolute;
        left: 0;
        right: 0;
        bottom: r(118);
        line-height: r(30);
        margin: 0 auto;
        font-size: r(24);
        color: #e7c598;
        text-align: center;
        span{
            padding: 0 r(6);
            border-bottom: 1px solid #e7c598;
        }
    }
}

.keB {
    margin-top: r(20);
    font-size: r(25);
    text-align: center;
    color: #e7c598;
    span {
        border-bottom: 1px solid #e7c598;
        padding: 0 r(6);
    }
}